<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>启动页面</title>

  <!-- <script src="../node_modules/react/umd/react.development.js"></script>

  <script src="../node_modules/react-dom/umd/react-dom.development.js"></script> -->
  <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
  <!--自定义的jsx-->
  <script type="text/jsx;harmony=true" src="request.jsx"></script>
 
</head>
<body>
 <!--配制dom一个标签-->
 <div id="btnClick">点我获取数据</div>
<script type="text/babel">
    import 'whatwg-fetch';
 class Student extends React.Component{
constructor(props){
    super(props);
 
    this.queryData=this.queryData.bind(this);
}
queryData(){
    console.log("查22222下数据");
    let result = 

    fetch('https://api.github.com/users/octocat/gists',{
   method: 'GET',
   headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
   }
}).then(res => { // 第一个then返回的是请求相关参数
   return res.json(); // 必须返回相应数据，不然第二个then中无法接收到数据
}).then(json => { // 返回的是数据
   console.log(json)
}).then(err => { // 返回的是错误

});

    console.log(result);
}
render(){
    return (<button onClick={this.queryData}>查111下</button>)
}
};
ReactDOM.render(
  <Student/>,
  document.getElementById('btnClick')
);
</script>
 </body>
</html>
